我今天要學習的部分是v-on的修飾子，它和之前介紹過的v-model修飾子的意思差不多都是指令的補充包，今天先來介紹"事件通用型"的修飾子。

v-on.stop

.stop的功能與JavaScript裡面的"event.stopPropagation()"一樣是用來終止事件的冒泡，看一下我們的範例程式:

    <div id="test1">
        <div class="p" v-show="msg.length > 0">
          <div v-for="m in msg">{{ m }}</div>
        </div>
       
        <div class="wrap">
          no .stop
          <div class="A" @click="alert('A')">
            <span>A</span>
            <div class="B" @click="alert('B')">B</div>
          </div>
        </div>
      
        <div class="wrap">
            with .stop
            <div class="A" @click="alert('A')">
            <span>A</span>
            <div class="B" @click.stop="alert('B')">B</div>
          </div>
        </div>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const vm = Vue.createApp({
            data(){
            return {
            msg: []
            }
        },
        methods: {
            alert(val){
                    this.msg.push(val);

            window.setTimeout(() => {
                this.msg = [];
            }, 3000);
            }
        }
        }).mount('#test1');
    </script>

程式我只放了模板和Vue.js的部分，還有一部份是關於CSS定義兩個不同大小矩形我就不放了，而這個程式在沒有使用.stop的執行是在user點擊A範圍，會出現提示A持續3秒，而點擊B範圍，會同時出現BA兩個提示持續3秒。而如果在點擊B範圍的程式的v-on後面加上.stop，就可以成功阻止事件冒泡執行提示A，讓網頁只顯示提示B。下面是實際操作的樣子。
網頁呈現:

v-on.prevent

.prevent對應到JavaScript就是"event.preventDefault()"，用來阻止事件的默認行為，比如當user點擊連結通常會直接跳轉至連結的網頁，而加上.prevent的作用就是阻止這個行為，讓程式可以執行我們自訂的其他行為。

v-on.capture

.capture是用來指定事件來捕獲並觸發，如果用我們前面的兩個矩形來比喻，如果沒有使用.capture點擊A會出現提示A，點擊B會出現提示BA，但我如果像要讓提示A永遠先被執行，就可以在提示A的部份加上.capture來讓點擊B時，顯示的是提示AB。

v-on.passive

.once就是非常字面的意思，有加上.once的事件只會被觸發一次。

v-on.passive

.passive是可以用來控制瀏覽器事件會不會觸發"event.preventDefault()"來阻止瀏覽器的默認行為，比較常用來改善scroll也就是網頁滾動的性能，但它在Vue.js3已經被取代，可以使用在event handler裡直接回傳false來達到相同的效果。

v-on.self

.self是用來控制元素指觸發自己的事件，從教材介紹的燈箱範例來看，如果我們要讓網頁通過點擊開啟一個燈箱，關閉方法是點擊燈箱的外部，可以將程式設定為這樣:

    <div id="test2">
        <h4>v-on.self</h4>
      
        <div class="mask" :style="modalStyle">
          <div class="container"  @click="toggleModal">
            <div class="body">Hi!</div>
          </div>
        </div>
      
        <button @click="isShow = true"> Try ! </button>
    </div>

        const self = Vue.createApp({
        data: () => {
            return {
            isShow: false
            }
        },
        computed: {
            modalStyle() {
            return {
                'display': this.isShow ? '' : 'none'
            };
            }
        },
        methods: {
            toggleModal() {
            this.isShow = !this.isShow;
            }
        }
        }).mount('#test2');

這樣可以達到點擊燈箱外面來關閉燈箱的效果，但是因為燈箱本身(body)也被計算在燈箱整體區塊(container)下，所以點擊到燈箱本身它也會被關閉，而我們可以通過在點擊container的事件中加上.self來讓燈箱本身被台除在外。

我今天的進度就先到這哩，今天學的是在教材中有提到的有關事件通用型的修飾子，明天將進入到控制鍵盤的修飾子部分，謝謝閱讀。